<template>
  <div class="details">
    <div class="title">{{info.title}}</div>
    <div class="date">{{info.create_time}}</div>
    <div class="content">
      {{info.content}}
    </div>
  </div>
</template>

<script>
import { systemMessageDetail } from '@/request/api'
export default {
  name: "Details",
  data() {
    return {
      info:{}
    }
  },
  created() {
    this.getDetailInfo()
  },
  methods: {
    getDetailInfo() {
      let id = this.$route.query.id;
      systemMessageDetail(id).then(res => {
        this.info = res.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.details {
  margin-top: 15px;
  padding-bottom: 800px;

  .title {
    font-size: 28px;
    font-weight: bold;
    color: #666;
    margin-bottom: 15px;
  }

  .date {
    font-size: 16px;
    color: #969696;
    margin-bottom: 15px;
  }

  .content {
    padding: 15px;
    border: solid 1px #eaeaea;
    height: 190px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 26px;
  }
}
</style>
